<template>
  <div class="centers">
    <div id="mains"></div>
  </div>
</template>
<script setup>
import echarts from "echarts";
import { onMounted, reactive } from "vue";
import { getForeinData } from "../../charts";

onMounted(() => {
  var chartDom = document.getElementById("mains");
  var myChart = echarts.init(chartDom);
  getForeinData().then((res) => {
    // console.log(res);
    const list = [];
    let stati = [];
    let yaArea = []; //亚洲
    let yaArea1 = []; //其他
    let yaArea2 = []; //北美洲
    let yaArea3 = []; //大洋洲
    let yaArea4= []; //大洋洲
    // const 5
    res.continentStatis.forEach((item) => {
      list.push(item.date);
      stati.push(item.statis);
    });
    // console.log(stati);
    stati
      .filter((item) => {
        return item.亚洲;
      })
      .forEach((item) => {
        // console.log(item.亚洲);
        yaArea.push(item.亚洲);
      });

     stati.filter((item) => { //其他
      return item.其他;
    }).forEach((item) => {
      yaArea1.push(item.其他)
    });
     stati.filter((item) => { //北美洲
      return item.北美洲;
    }).forEach((item) => {
      yaArea2.push(item.北美洲)
    });
      stati.filter((item) => { //北美洲
      return item.大洋洲;
    }).forEach((item) => {
      yaArea3.push(item.大洋洲)
    });
     stati.filter((item) => { //北美洲
      return item.欧洲;
    }).forEach((item) => {
      yaArea4.push(item.欧洲)
    });
 
    // console.log(stati);
    let option = {
      // title: {
      //   text: '大洲感染总人数趋势图',
      //    x: "center",
      //   textStyle: {
      //     color: "#fff",
      //   },
      // },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "cross",
          label: {
            backgroundColor: "#6a7985",
          },
        },
      },
      legend: {
        data: ["亚洲", "其他", "北美洲", "大洋洲", "欧洲"],
      },
      toolbox: {
        feature: {
          saveAsImage: {},
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
          data: list,
        },
      ],
      yAxis: [
        {
          type: "value",
        },
      ],
      series: [
        {
          name: "亚洲",
          type: "line",

          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: yaArea,
        },
        {
          name: "其他",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: yaArea1,
        },
        {
          name: "北美洲",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: yaArea2,
        },
        {
          name: "大洋洲",
          type: "line",
          stack: "Total",
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: yaArea3,
        },
        {
          name: "欧洲",
          type: "line",
          stack: "Total",
          label: {
            show: true,
            position: "top",
          },
          areaStyle: {},
          emphasis: {
            focus: "series",
          },
          data: yaArea4,
        },
      ],
    };
    myChart.setOption(option);
  });
  window.addEventListener(
    "resize",
    function () {
      myChart.resize();
    },
    false
  );
});
</script>
<style lang="scss" scoped>
.centers {
  color: #fff;
  width: 510px;
  height: 280px;
}
#mains {
  height: 335px;
  text-align: center;
  padding: 0 10px;
  margin-top: 20px;
}
</style>
